---
title: Analise o tamanho dos pacotes
description: Aprenda como analisar os pacotes gerados por Astro usando `rollup-plugin-visualizer`.
i18nReady: true
type: recipe
---

import { Steps } from '@astrojs/starlight/components';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

Entender o que é parte de um pacote Astro é importante para melhorar o desempenho de um site. Visualizar os pacotes pode fornecer pistas sobre onde mudanças podem ser feitas no seu projeto para reduzir o tamanho dos pacotes.

## Receita

A [biblioteca `rollup-plugin-visualizer`](https://github.com/btd/rollup-plugin-visualizer) permite que você visualize e analise seu pacote Rollup para ver quais módulos estão ocupando muito espaço.
<Steps>
1. Instale `rollup-plugin-visualizer`:

    <PackageManagerTabs>
        <Fragment slot="npm">
        ```shell
        npm install rollup-plugin-visualizer --save-dev
        ```
        </Fragment>
        <Fragment slot="pnpm">
        ```shell
        pnpm add rollup-plugin-visualizer --save-dev
        ```
        </Fragment>
        <Fragment slot="yarn">
        ```shell
        yarn add rollup-plugin-visualizer --save-dev
        ```
        </Fragment>
    </PackageManagerTabs>

2. Adicione o plugin ao arquivo `astro.config.mjs`:

    ```js
    // @ts-check
    import { defineConfig } from 'astro/config';
    import { visualizer } from "rollup-plugin-visualizer";

    export default defineConfig({
    vite: {
        plugins: [visualizer({
            emitFile: true,
            filename: "stats.html",
        })]
    }
    });
    ```
3. Execute o comando de build:

    <PackageManagerTabs>
        <Fragment slot="npm">
        ```shell
        npm run build
        ```
        </Fragment>
        <Fragment slot="pnpm">
        ```shell
        pnpm build
        ```
        </Fragment>
        <Fragment slot="yarn">
        ```shell
        yarn build
        ```
        </Fragment>
    </PackageManagerTabs>

4. Encontre o(s) arquivo(s) `stats.html` do seu projeto.

		Eles estarão na raiz do seu diretório `dist/` para sites totalmente estáticos e permitirão que você veja o que está incluído no pacote.
		
		Se seu projeto Astro usa renderização sob demanda, você terá dois arquivos `stats.html`. Um será para o cliente, e outro para o servidor, e cada um estará localizado na raiz dos diretórios `dist/client` e `dist/server/`.
		
		Veja [a documentação Rollup Plugin Visualizer](https://github.com/btd/rollup-plugin-visualizer#how-to-use-generated-files) para orientação sobre como interpretar esses arquivos, ou como configurar opções específicas.
		
</Steps>

:::note
Dada a abordagem única de hidratação Astro, a build não é necessariamente representativa dos pacotes 
que o cliente receberá. 

O visualizador Rollup mostra todas as dependências que são usadas através do site, mas ela não separa o tamanho dos pacotes em uma relação por página.
:::
